<template>
  <view class="aid-detail">
    <!-- 互助内容 -->
    <view class="aid-content">
      <!-- 互助基本信息 -->
      <view class="aid-info">
        <view class="info-header">
          <view class="type-badge" :class="getTypeClass(aidDetail.type)">
            <text class="type-text">{{ aidDetail.typeText }}</text>
          </view>
          <view class="aid-status">
            <u-tag 
              :text="aidDetail.statusText" 
              :type="getStatusType(aidDetail.status)"
              size="normal"
            ></u-tag>
          </view>
        </view>

        <view class="info-body">
          <text class="aid-title">{{ aidDetail.title }}</text>
          <text class="aid-description">{{ aidDetail.description }}</text>
        </view>

        <view class="info-meta">
          <view class="meta-item">
            <u-icon name="user" size="16" color="#722ed1"></u-icon>
            <view class="meta-content">
              <text class="meta-label">发布人</text>
              <text class="meta-value">{{ aidDetail.publisher }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="map-pin" size="16" color="#722ed1"></u-icon>
            <view class="meta-content">
              <text class="meta-label">所在位置</text>
              <text class="meta-value">{{ aidDetail.location }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="clock" size="16" color="#722ed1"></u-icon>
            <view class="meta-content">
              <text class="meta-label">发布时间</text>
              <text class="meta-value">{{ aidDetail.publishTime }}</text>
            </view>
          </view>
          
          <view class="meta-item">
            <u-icon name="wallet" size="16" color="#722ed1"></u-icon>
            <view class="meta-content">
              <text class="meta-label">报酬</text>
              <text class="meta-value" :class="{ free: aidDetail.reward === 0 }">
                {{ aidDetail.reward === 0 ? '免费' : `¥${aidDetail.reward}` }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 详细描述 -->
      <view class="aid-details">
        <view class="section-title">
          <u-icon name="file-text" size="16" color="#722ed1"></u-icon>
          <text class="title-text">详细描述</text>
        </view>
        <view class="details-content">
          <rich-text :nodes="aidDetail.content"></rich-text>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="contact-section">
        <view class="section-title">
          <u-icon name="phone" size="16" color="#722ed1"></u-icon>
          <text class="title-text">联系方式</text>
        </view>
        <view class="contact-content">
          <view class="contact-item">
            <text class="contact-label">联系电话</text>
            <text class="contact-value" @click="handleCall">{{ aidDetail.contactPhone }}</text>
          </view>
          <view class="contact-item">
            <text class="contact-label">微信</text>
            <text class="contact-value" @click="handleWechat">{{ aidDetail.wechat }}</text>
          </view>
        </view>
      </view>

      <!-- 互助须知 -->
      <view class="aid-notice">
        <view class="section-title">
          <u-icon name="info-circle" size="16" color="#722ed1"></u-icon>
          <text class="title-text">互助须知</text>
        </view>
        <view class="notice-content">
          <view 
            v-for="(notice, index) in aidDetail.notices" 
            :key="index"
            class="notice-item"
          >
            <text class="notice-text">{{ notice }}</text>
          </view>
        </view>
      </view>

      <!-- 帮助记录 -->
      <view class="help-records">
        <view class="section-title">
          <u-icon name="users" size="16" color="#722ed1"></u-icon>
          <text class="title-text">帮助记录</text>
          <text class="record-count">({{ aidDetail.helpRecords.length }})</text>
        </view>
        <view class="records-content">
          <view 
            v-for="(record, index) in aidDetail.helpRecords" 
            :key="index"
            class="record-item"
          >
            <view class="record-header">
              <view class="user-info">
                <text class="user-name">{{ record.userName }}</text>
                <view class="user-rating">
                  <u-rate 
                    :value="record.rating" 
                    :count="5" 
                    :size="12" 
                    active-color="#722ed1"
                    inactive-color="#d9d9d9"
                    readonly
                  ></u-rate>
                </view>
              </view>
              <text class="record-time">{{ record.time }}</text>
            </view>
            <text class="record-content">{{ record.content }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-left">
        <view class="action-btn" @click="handleLike">
          <u-icon name="heart" size="18" :color="isLiked ? '#ff4757' : '#999'"></u-icon>
          <text class="btn-text" :class="{ liked: isLiked }">{{ isLiked ? '已点赞' : '点赞' }}</text>
        </view>
        <view class="action-btn" @click="handleCollect">
          <u-icon name="star" size="18" :color="isCollected ? '#ffa502' : '#999'"></u-icon>
          <text class="btn-text" :class="{ collected: isCollected }">{{ isCollected ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
      
      <view class="action-right">
        <view 
          class="help-btn" 
          :class="getButtonClass(aidDetail.status)"
          @click="handleHelp"
        >
          <text class="btn-text">{{ getButtonText(aidDetail.status) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 互助详情数据
const aidDetail = reactive({
  id: 1,
  title: '帮忙照看宠物',
  type: 'help',
  typeText: '求助',
  status: 1,
  statusText: '进行中',
  description: '出差3天，需要帮忙照看家里的猫咪，提供猫粮和猫砂，有经验者优先。',
  publisher: '张女士',
  location: '1号楼2单元301',
  publishTime: '2025-01-21 14:30',
  reward: 50,
  contactPhone: '138****5678',
  wechat: 'zhang_***',
  content: `
    <p>由于工作需要，我将于本周五出差3天，需要有人帮忙照看家里的猫咪。</p>
    <p><strong>猫咪信息：</strong></p>
    <ul>
      <li>品种：英短蓝猫</li>
      <li>年龄：2岁</li>
      <li>性格：温顺，不认生</li>
      <li>健康状况：良好，已绝育</li>
    </ul>
    <p><strong>需要做的事情：</strong></p>
    <ul>
      <li>每天喂食2次（早晚各一次）</li>
      <li>清理猫砂盆</li>
      <li>陪猫咪玩耍</li>
      <li>观察猫咪健康状况</li>
    </ul>
    <p><strong>提供物品：</strong></p>
    <ul>
      <li>猫粮（足够3天）</li>
      <li>猫砂</li>
      <li>猫咪玩具</li>
      <li>联系方式</li>
    </ul>
    <p>有养猫经验者优先，报酬50元，谢谢！</p>
  `,
  notices: [
    '请提前联系确认时间安排',
    '如有紧急情况请及时联系',
    '请爱护宠物，不要伤害它们',
    '完成后请及时反馈情况',
    '如有问题可随时沟通'
  ],
  helpRecords: [
    {
      userName: '李女士',
      rating: 5,
      time: '2025-01-20',
      content: '帮忙照看了2天，猫咪很乖，主人很满意，推荐！'
    },
    {
      userName: '王先生',
      rating: 4,
      time: '2025-01-18',
      content: '服务很好，猫咪照顾得很周到，下次还会选择。'
    }
  ]
})

// 用户操作状态
const isLiked = ref(false)
const isCollected = ref(false)

// 获取类型样式类
const getTypeClass = (type: string) => {
  switch (type) {
    case 'help': return 'type-help'
    case 'offer': return 'type-offer'
    default: return 'type-default'
  }
}

// 获取状态类型
const getStatusType = (status: number) => {
  switch (status) {
    case 1: return 'primary'
    case 2: return 'success'
    case 3: return 'info'
    default: return 'info'
  }
}

// 获取按钮样式类
const getButtonClass = (status: number) => {
  switch (status) {
    case 1: return 'btn-help'
    case 2: return 'btn-completed'
    case 3: return 'btn-cancelled'
    default: return 'btn-default'
  }
}

// 获取按钮文本
const getButtonText = (status: number) => {
  switch (status) {
    case 1: return '提供帮助'
    case 2: return '已完成'
    case 3: return '已取消'
    default: return '查看详情'
  }
}


// 拨打电话
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: aidDetail.contactPhone,
    success: () => {
      console.log('拨打电话成功')
    },
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'error'
      })
    }
  })
}

// 复制微信
const handleWechat = () => {
  uni.setClipboardData({
    data: aidDetail.wechat,
    success: () => {
      uni.showToast({
        title: '微信已复制',
        icon: 'success'
      })
    }
  })
}

// 点赞功能
const handleLike = () => {
  isLiked.value = !isLiked.value
  uni.showToast({
    title: isLiked.value ? '点赞成功' : '取消点赞',
    icon: 'success'
  })
}

// 收藏功能
const handleCollect = () => {
  isCollected.value = !isCollected.value
  uni.showToast({
    title: isCollected.value ? '收藏成功' : '取消收藏',
    icon: 'success'
  })
}

// 提供帮助
const handleHelp = () => {
  if (aidDetail.status === 1) {
    // 跳转到提供帮助页面
    uni.navigateTo({
      url: `/pages/neighborly-mutual-aid/help?id=${aidDetail.id}`
    })
  } else if (aidDetail.status === 2) {
    uni.showToast({
      title: '互助已完成',
      icon: 'none'
    })
  } else if (aidDetail.status === 3) {
    uni.showToast({
      title: '互助已取消',
      icon: 'none'
    })
  }
}

// 页面加载
onMounted(() => {
  console.log('互助详情页面加载完成')
})
</script>

<style lang="scss" scoped>
.aid-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}


.aid-content {
  .aid-info {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .type-badge {
        padding: 12rpx 24rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
        font-weight: 500;
        
        &.type-help {
          background-color: #ff4d4f;
          color: #fff;
        }
        
        &.type-offer {
          background-color: #52c41a;
          color: #fff;
        }
      }
      
      .aid-status {
        flex-shrink: 0;
      }
    }
    
    .info-body {
      margin-bottom: 30rpx;
      
      .aid-title {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
        margin-bottom: 16rpx;
      }
      
      .aid-description {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
      }
    }
    
    .info-meta {
      .meta-item {
        display: flex;
        align-items: center;
        gap: 20rpx;
        margin-bottom: 24rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .meta-content {
          flex: 1;
          
          .meta-label {
            display: block;
            font-size: 24rpx;
            color: #999;
            margin-bottom: 8rpx;
          }
          
          .meta-value {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
            
            &.free {
              color: #52c41a;
            }
          }
        }
      }
    }
  }
  
  .aid-details,
  .contact-section,
  .aid-notice,
  .help-records {
    background-color: #fff;
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 20rpx;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
      
      .record-count {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .details-content {
      :deep(p) {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        margin-bottom: 20rpx;
      }
      
      :deep(strong) {
        font-weight: 600;
        color: #722ed1;
      }
      
      :deep(ul) {
        margin: 20rpx 0;
        padding-left: 40rpx;
        
        li {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
          margin-bottom: 12rpx;
        }
      }
    }
    
    .contact-content {
      .contact-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .contact-label {
          font-size: 28rpx;
          color: #666;
        }
        
        .contact-value {
          font-size: 28rpx;
          color: #722ed1;
          font-weight: 500;
        }
      }
    }
    
    .notice-content {
      .notice-item {
        display: flex;
        align-items: flex-start;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .notice-text {
          flex: 1;
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
    
    .records-content {
      .record-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .record-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12rpx;
          
          .user-info {
            display: flex;
            align-items: center;
            gap: 12rpx;
            
            .user-name {
              font-size: 26rpx;
              color: #333;
              font-weight: 500;
            }
          }
          
          .record-time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .record-content {
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .action-left {
    display: flex;
    gap: 40rpx;
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      
      .btn-text {
        font-size: 24rpx;
        color: #999;
        
        &.liked {
          color: #ff4757;
        }
        
        &.collected {
          color: #ffa502;
        }
      }
    }
  }
  
  .action-right {
    .help-btn {
      padding: 20rpx 60rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: 500;
      text-align: center;
      transition: all 0.3s ease;
      
      &.btn-help {
        background-color: #722ed1;
        color: #fff;
        
        &:active {
          background-color: #531dab;
        }
      }
      
      &.btn-completed {
        background-color: #52c41a;
        color: #fff;
      }
      
      &.btn-cancelled {
        background-color: #d9d9d9;
        color: #666;
      }
    }
  }
}
</style>
